<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改头像</title>
    <link rel="stylesheet" href="/resources/element-ui/lib/theme-chalk/index.css">
    <script type="text/javascript" src="/resources/js/vue.js"></script>
    <script type="text/javascript" src="/resources/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="/resources/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-form>
        <el-form-item>
            <!--
                auto-upload="false"不在选取文件之后，立即自动进行上传
                show-file-list="false"不显示上传的图片列表
                on-change="onChange控制每个功能对应自己的上传文件，同时文件上传为手动上传（使用该方法控制文件上传的大小以及格式）
                on-success="onSuccess"使用按钮提交文件，成功后要执行对应的onSuccess方法（使用该方法接收后端的返回）
            -->
            <el-upload
                    id = "headImg"
                    name="headImg"
                    action="/upload/uploadFile.do"
                    accept=".jpg,.JPG,.JPEG,.png,.PNG,.gif,.GIF"
                    :auto-upload="false"
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-change="onChange"
                    :on-success="onSuccess"
                    ref="uploadImgRef"
            >
                <!--指定文件上传的区域-->
                <div style="width: 200px;height: 200px" class="el-upload-dragger">
                    <!--图片的预览-->
                    <img v-if="imgUrl" :src="imgUrl" style="width: 200px;height: 200px">
                    <!--最先展示的内容-->
                    <div v-else>
                        <!--云-->
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖拽到此处或<em>点击文件上传</em></div>
                        <div class="el-upload__tip">文件大小不能超过1M</div>
                    </div>
                </div>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-upload" @click="uploadHeadImg">上传图像</el-button>
        </el-form-item>
    </el-form>
</div>
<script type="text/javascript" src="/resources/js/account/editHeadImg.js"></script>
</body>
</html>